<template>
  <div class="app-shell">
    <header class="app-header-wrap app-header">
      <m-header title="Google"></m-header>
    </header>
    <div class="app-view-wrap">
      <div class="app-view app-view-with-header app-view-with-footer">
        <router-view></router-view>
      </div>
    </div>
    <footer class="app-footer-wrap app-footer">
      <m-tabbar :list="icons" :active="active" @update:active="val => active = val"></m-tabbar>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icons: [
        {
          text: "Home",
          icon: "&#xe62a;",
          handler: () => this.goto("/index")
        },
        {
          text: "Contact",
          icon: "&#xe60e;",
          handler: () => this.goto("/contact")
        },
        {
          text: "Find",
          icon: "&#xe604;",
          handler: () => this.goto("/find")
        },
        {
          text: "Me",
          icon: "&#xe60f;",
          handler: () => this.goto("/center")
        }
      ],
      active: 0
    };
  }
};
</script>

<style lang='less' scoped>
.app-shell {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: column;
  .app-header-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
  }
  .app-header {
    height: 52px;
    background: #2874f0;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14),
      0 1px 10px rgba(0, 0, 0, 0.12);
  }
  .app-view-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
    .app-view {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      overflow-x: hidden;
      overflow-y: auto;
      transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
      background: #f5f5f9;
    }
    .app-view-with-header {
      top: 52px;
    }
    .app-view-with-footer {
      bottom: 56px;
    }
  }
  .app-footer-wrap {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
  }
  .app-footer {
    display: flex;
    align-items: center;
    height: 56px;
    background: #fff;
    box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
}
</style>
